import { observer } from "mobx-react";
import classnames from 'classnames';
import { Icon, Modal, Button } from 'antd';
import { WeaDialog, WeaError, WeaInput } from 'ecCom';

@observer
export default class DropMenu extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <div onMouseEnter={this.enterDropMenu} onMouseLeave={this.leaveDropMenu}>
                <div className="edc-drop-menu-popu" style={{ left: store.dropMenuLeft, top: store.dropMenuTop }} >
                    <ul className={classnames('menu', { 'menu-hidden': !store.dropMenuVisible })}>
                        {store.excelPages.map(d => (
                            <li
                                title={d.name}
                                onClick={store.showPage.bind(store, d.id)}
                                className={classnames('menu-item', 'text-elli', { active: d.id === store.selectedKey })}
                                key={d.id}>
                                <div className="text-elli" style={{ width: 160 }}>{d.name}</div>
                                {!store.readonly && <div className="menu-item-opts">
                                    <Icon type="edit" onClick={this.editPage.bind(this, d.id, d.name)} title="修改"></Icon>
                                    <Icon type="delete" onClick={this.deletePage.bind(this, d.id)} title="删除"></Icon>
                                </div>}
                            </li>
                        ))}
                    </ul>
                </div>
                <WeaDialog
                    icon={"icon-coms02-Data-center"}
                    iconBgcolor="#1a57a0"
                    title={`修改表格：${store.operatePage.name}`}
                    draggable={true}
                    visible={store.editPageVisible}
                    style={{ height: 'auto' }}
                    buttons={[<Button type="primary" loading={store.editPageLoading} onClick={this.savePage} >保存</Button>, <Button type="primary" onClick={store.hideEditPage} >取消</Button>]}
                >

                    <div style={{ lineHeight: '32px', padding: 24 }}>
                        <label style={{ marginRight: 10 }}>名称</label>
                        <WeaError
                            tipPosition='bottom'
                            ref={ref => store.nameError = ref}
                            error='数据为空'>
                            <WeaInput
                                style={{ width: 300, marginLeft: 10 }}
                                value={store.operatePage.newName}
                                viewAttr={3}
                                onChange={store.changeOperatePageName}
                            />
                        </WeaError>
                    </div>
                </WeaDialog>
            </div>
        )
    }
    editPage = (id, name, e) => {
        const { store } = this.props;
        store.showPageEditDialog(id, name);
        e.stopPropagation();
    }
    savePage = ()=>{
        const { store } = this.props;
        store.savePage();
    }
    deletePage = (id, e) => {
        Modal.confirm({
            title: '删除表格',
            content: '确认删除表格',
            onOk: () => {
                const { store } = this.props;
                store.deletePage(id);
            }
        });
        e.stopPropagation();
    }
    enterDropMenu = () => {
        const { store } = this.props;
        clearTimeout(store.hideDropMenuTimer);
    }
    leaveDropMenu = () => {
        const { store } = this.props;
        store.hideDropMenu();
    }
}